<template>
	<view class="content">
		<lcw-nav-bar>首页</lcw-nav-bar>
		<view class="list-box">
			<view v-for="i in components">
				<navigator v-if="i" :url="i.path">
					<view class="item-box">
						<view class="component-name">{{ i.name }}</view>
						<view class="component-tag" v-for="item in i.tag">
							{{ item }}
						</view>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive } from 'vue';

const components = reactive([
	{
		path: '/pages/input-number/input-number',
		name: '数字输入框',
		tag: ['input-number']
	},
	{
		path: '/pages/select-address-vue3/select-address-vue3',
		name: '地址选择 vue3版本 省市区 三级',
		tag: ['select-address-vue3']
	},
	{
		path: '/pages/select-address/select-address',
		name: '地址选择 vue3版本兼容vue2 省市区镇 可选三级四级',
		tag: ['select-address']
	}
]);

</script>

<style lang="scss">
.list-box {
	.item-box {
		color: #333;
		padding: 20rpx 30rpx;
		border-bottom: 2rpx solid #d4d4d4;

		.component-name {
			font-size: 28rpx;
			font-weight: 600;
		}

		.component-tag {
			margin-top: 5rpx;
			color: #fff;
			background-color: #126cf3;
			display: inline-block;
			border-radius: 5rpx;
			font-size: 20rpx;
			padding: 4rpx 5rpx;
		}
	}
}
</style>
